<template functional>
    <a-sub-menu :key="props.currentRoute.path">
        <template slot="title">
            <template v-if="props.currentRoute.children && props.currentRoute.children.every(child => child.extendone == 'true')">
                <menu-item v-if="props.currentRoute.children && !props.currentRoute.hidden" :key="props.currentRoute.path"
                    :currentRoute="props.currentRoute"></menu-item>
            </template>
            <template v-else>
                <template v-if="props.currentRoute.meta.icon">
                    <svg-icon :icon="props.currentRoute.meta.icon"></svg-icon>
                </template>
                <span style="margin-left:16px" class="menu-title">{{ props.currentRoute.meta.title }}</span>
            </template>
        </template>
        <template v-if="props.currentRoute.children && !props.currentRoute.children.every(child => child.extendone == 'true')">
            <template v-for="item in (props.currentRoute.children|| [])">
                <menu-item v-if="!item.children || (item.children && !item.children.every(child => child.extendone == 'true'))" :key="item.path" :currentRoute="item" />
                <menu-item v-if="item.children || (item.children && !item.children.every(child => child.extendone == 'true'))" :key="item.path" :currentRoute="item" />
                <sub-menu :key="item.path" v-if="item.children && !item.children.every(child => child.extendone == 'true')" :currentRoute="item" />
            </template>
        </template>
    </a-sub-menu>
</template>

<script>
import MenuItem from './menuItem.vue';
export default {
    name: 'SubMenu',
    components: { MenuItem },
    props: {
        currentRoute: {
            type: Object | String,
            default: () => { }
        }
    }
};
</script>
